<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="https://www.baidu.com" method="get">
        <input type="text" name="username">
        <input type="password" name="password">
        <input type="reset" value="重置">

        <input type="submit" value="提交">
    </form>


    <script>
        // focus  焦点移入 
        // blur 焦点移出 
        // change  表单内容改变  
        // input  输入和删除内容触发 
        // reset  表单重置   都要绑定到form身上 
        // submit  表单提交触发都要绑定到form身上 

        var inp = document.querySelector('input');
        var formele = document.querySelector('form');

        // inp.addEventListener('focus',function(){
        //     alert('楼上男宾两位');
        // });

        // inp.addEventListener('blur',function(){
        //     console.log('下次再来找我');
        // });

        // change 交焦点移入的时候  和 焦点移出的时候 内容不一致 立马触发 

        // inp.addEventListener('change',function(){
        //     console.log('我发生了改变');
        // });

        // input 输入 和删除内容的时候触发  实时触发  

        // inp.addEventListener('input',function(){
        //     console.log('内容不断的再写'); //写一个字符 删除一个字符 都会触发
        // });

        // inp.addEventListener('reset',function(){
        //     alert('adsfasdfsdaf');
        // });

        // formele.addEventListener('reset',function(){
        //     alert('adsfasdfsdaf');
        // });


        formele.addEventListener('submit',function(){
            alert('我被提交了');
        });
    </script>
</body>
</html>